<template>
  <div>
    <Card style="height: 240px; padding: 12px 12px 0px">
      <div class="head-title">基本信息</div>
      <div class="detail-body">
        <div class="ant-col-md-6">
          <div class="info">
            <div class="head-info">
              <Avatar size="large" :src="memberInfo.face" />
              <div>
                <div
                  class="name"
                  v-if="memberInfo.username && memberInfo.username.length > 15"
                >
                  {{ memberInfo.username.slice(0, 15) }}...
                </div>
                <div class="name" v-else>
                  {{ memberInfo.username }}
                </div>
                <div class="phone">
                  {{ memberInfo.mobile }}
                </div>
                <div class="phone">
                  {{ memberInfo.gradeIdName }}
                </div>
              </div>
            </div>
            <div class="bottom-info">
              <p>上次登录 {{ memberInfo.lastLoginDate }}&nbsp;</p>
              <p>
                <!-- <i-switch size="large" v-model="memberInfo.disabled" :true-value="true" :false-value="false"
                  @on-change="memberStatusChange">
                  <span slot="open">启用</span>
                  <span slot="close">禁用</span>
                </i-switch> -->
              </p>
            </div>
          </div>
        </div>
        <div class="ant-col-md-6">
          <p class="item">
            <span class="label">推广人手机号：</span>
            <span class="info">{{ memberInfo.extensionMobile }}</span>
          </p>
          <p class="item">
            <span class="label">注册时间：</span>
            <span class="info">{{ memberInfo.createTime }}</span>
          </p>
          <p class="item">
            <span class="label">到期时间：</span>
            <span class="info">{{ memberInfo.memberEndTime }}</span>
          </p>
          <p class="item">
            <span class="label">充值钱包余额：</span>
            <span class="info">{{ memberInfo.rechargeMoney }}</span>
          </p>
          <p class="item">
            <span class="label">地区：</span>
            <span class="info">{{ memberInfo.locationName }}</span>
          </p>
        </div>
      </div>
    </Card>

    <Card class="mt_10">
      <Tabs value="order" @on-click="memberInfoChange">
        <TabPane label="收入" name="order" style="min-height: 200px">
          <Row>
            <Form
              ref="searchForm"
              :model="orderSearchForm"
              inline
              :label-width="70"
              class="search-form"
            >
              <Form-item label="收入类型" prop="start">
                <Select
                  v-model="orderSearchForm.start"
                  placeholder="请选择"
                  clearable
                  style="width: 200px"
                >
                  <Option value="CHARGE">充值</Option>
                  <Option value="TURN">转账</Option>
                  <Option value="MEETING">会员</Option>
                </Select>
              </Form-item>
              <Form-item label="下单时间">
                <DatePicker
                  v-model="selectDate"
                  type="datetimerange"
                  format="yyyy-MM-dd"
                  clearable
                  @on-change="selectDateRange"
                  placeholder="选择起始时间"
                  style="width: 300px"
                ></DatePicker>
              </Form-item>
              <Button
                @click="getOrderData"
                type="primary"
                icon="ios-search"
                class="search-btn"
                >搜索</Button
              >

              <div class="totleQuota">
                <p>
                  焕贝额总额<span>{{ IncomeByPageCount.sumyiBei }}</span>
                </p>
                <p>
                  现金额总额<span>{{ IncomeByPageCount.sumCash }}</span>
                </p>
              </div>
            </Form>
          </Row>
          <div style="min-height: 180px">
            <Table
              :loading="loading"
              border
              :columns="orderColumns"
              :data="orderData"
              ref="table"
              class="mt_10"
            >
            </Table>
            <Row
              type="flex"
              justify="end"
              class="mt_10"
              style="margin-top: 10px"
            >
              <Page
                :current="orderSearchForm.pageNumber"
                :total="orderTotal"
                :page-size="orderSearchForm.pageSize"
                @on-change="orderChangePage"
                @on-page-size-change="orderChangePageSize"
                :page-size-opts="[10, 20, 50, 100]"
                size="small"
                show-total
                show-elevator
                show-sizer
              ></Page>
            </Row>
          </div>
        </TabPane>
        <TabPane label="支出" name="receipt">
          <Row>
            <Form
              ref="searchForm"
              :model="receiptRecordSearchForm"
              inline
              :label-width="70"
              class="search-form"
            >
              <Form-item label="支出类型" prop="start">
                <Select
                  v-model="receiptRecordSearchForm.start"
                  placeholder="请选择"
                  clearable
                  style="width: 200px"
                >
                  <Option value="MEETING">充值会员</Option>
                  <Option value="OFFLINE">线下订单</Option>
                  <Option value="NORMAL">线上订单</Option>
                  <Option value="VIRTUAL">虚拟订单</Option>
                </Select>
              </Form-item>
              <Form-item label="下单时间">
                <DatePicker
                  v-model="selectDate"
                  type="datetimerange"
                  format="yyyy-MM-dd"
                  clearable
                  @on-change="selectDateRangeZC"
                  placeholder="选择起始时间"
                  style="width: 300px"
                ></DatePicker>
              </Form-item>
              <Button
                @click="getReceiptRecordData"
                type="primary"
                icon="ios-search"
                class="search-btn"
                >搜索</Button
              >

              <div class="totleQuota">
                <p>
                  焕贝额总额<span>{{ expenditureCount.sumyiBei }}</span>
                </p>
              </div>
            </Form>
          </Row>
          <Table
            :loading="loading"
            border
            :columns="receiptRecordColumns"
            :data="receiptRecordData"
            class="mt_10"
            ref="table"
          >
            <template slot="orderSnSlot" slot-scope="scope">
              <a @click="orderDetail(scope.row.orderSn)">{{
                scope.row.orderSn
              }}</a>
            </template>
          </Table>

          <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
            <Page
              :current="receiptRecordSearchForm.pageNumber"
              :total="receiptRecordTotal"
              :page-size="receiptRecordSearchForm.pageSize"
              @on-change="walletChangePage"
              @on-page-size-change="walletChangePageSize"
              :page-size-opts="[10, 20, 50, 100]"
              size="small"
              show-total
              show-elevator
              show-sizer
            ></Page>
          </Row>
        </TabPane>
      </Tabs>
    </Card>
   
  </div>
</template>

<script>
import region from "@/views/lili-components/region";
import * as API_Member from "@/api/member.js";
import ossManage from "@/views/sys/oss-manage/ossManage";
import liliMap from "@/views/my-components/map/index";
import * as RegExp from "@/libs/RegExp.js";
import * as API_Order from "@/api/order.js";

export default {
  name: "memberDetail",
  components: {
    region,
    ossManage,
    liliMap,
  },
  data() {
    return {
      id: "", //会员id
      loading: true, // 表单加载状态
      memberInfo: {}, //会员信息
      memberWalletInfo: {}, //会员预存款信息
      addressModalTitle: "", //会员地址操作标题
      addressModalVisible: false, //会员地址操作弹出框
      addressForm: {
        id: "",
        isDefault: "0",
      }, //会员地址操作form
      selectDate: null, // 选择时间段
      submitLoading: false, // 添加或编辑提交状态
      addressFormValidate: {
        name: [
          {
            required: true,
            message: "收货人姓名不能为空",
          },
        ],
        mobile: [
          {
            required: true,
            message: "请输入收货人手机号码",
          },
          {
            pattern: RegExp.mobile,
            message: "请输入正确的手机号",
          },
        ],
        consigneeAddressPath: [
          {
            required: true,
            message: "收货人地址不能为空",
          },
        ],
        detail: [
          {
            required: true,
            message: "收货人详细地址不能为空",
          },
        ],
        alias: [
          {
            required: true,
            message: "收货人地址别名不能为空",
          },
        ],
      }, //会员地址操作表单校验
      //历史积分表格
      pointsColumns: [
        {
          title: "操作内容",
          key: "content",
          minWidth: 120,
          tooltip: true,
        },
        {
          title: "操作时间",
          key: "createTime",
          width: 200,
        },
        {
          title: "之前积分",
          key: "beforePoint",
          width: 150,
        },
        {
          title: "变动积分",
          key: "variablePoint",
          width: 150,
          render: (h, params) => {
            if (params.row.pointType == "INCREASE") {
              return h("div", [
                h(
                  "span",
                  {
                    style: {
                      color: "green",
                    },
                  },
                  "+" + params.row.variablePoint
                ),
              ]);
            } else {
              return h("div", [
                h(
                  "span",
                  {
                    style: {
                      color: "red",
                    },
                  },
                  "-" + params.row.variablePoint
                ),
              ]);
            }
          },
        },
        {
          title: "当前积分",
          key: "point",
          width: 150,
        },
      ],
      pointData: [], //历史积分数据
      pointTotal: 0, //历史积分总条数
      //历史积分数据查询form
      pointSearchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
      },
      orderColumns: [
        {
          title: "会员昵称",
          key: "nickName",
          tooltip: true,
          width: "100",
        },
        {
          title: "手机号码",
          key: "mobile",
          tooltip: true,
          width: "120",
        },
        {
          title: "级别",
          key: "gradeIdName",
          width: "100",
        },
        {
          title: "区域",
          key: "locationName",
        },
        {
          title: "流水号",
          key: "receivableNo",
        },
        {
          title: "收入时间",
          key: "incomeTime",
        },
        {
          title: "收入类型",
          key: "incomeType",
          tooltip: true,
          width: "100",
          render: (h, params) => {
            if (params.row.incomeType == "4") {
              return h("div", "充值");
            }
            if (
              params.row.incomeType == "43" ||
              params.row.incomeType == "44"
            ) {
              return h("div", "会员充值");
            }
            if (params.row.incomeType == "99") {
              return h("div", "转账");
            }
          },
        },
        {
          title: "焕贝额",
          key: "yiBei",
          render: (h, params) => {
            return h(
              "div",
              this.$options.filters.unitPrice(params.row.yiBei, "焕贝")
            );
          },
        },
        {
          title: "现金额",
          key: "cash",
          render: (h, params) => {
            if (params.row.cash) {
              return h(
                "div",
                this.$options.filters.unitPrice(params.row.cash, "")
              );
            } else {
              return h("div", this.$options.filters.unitPrice("0", ""));
            }
          },
        },
      ],
      orderData: [], //订单数据
      orderTotal: 0, //订单总条数
      //TA的订单form
      orderSearchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        start: "",
        startDate: "",
        endDate: "",
      },
      //TA的发票记录
      receiptRecordSearchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        start: "",
        startDate: "",
        endDate: "",
      },
      receiptRecordColumns: [
        {
          title: "会员昵称",
          key: "nickName",
          width: 260,
        },
        {
          title: "手机号码",
          key: "mobile",
          minWidth: 130,
          tooltip: true,
        },
        {
          title: "级别",
          key: "gradeIdName",
          minWidth: 130,
          tooltip: true,
        },
        {
          title: "区域",
          key: "locationName",
          width: 130,
        },
        {
          title: "流水号",
          key: "receivableNo",
          minWidth: 120,
          tooltip: true,
        },
        {
          title: "支出时间",
          key: "expenditureTime",
          minWidth: 120,
          tooltip: true,
        },
        {
          title: "支出类型",
          key: "expenditureType",
          tooltip: true,
          width: "100",
          render: (h, params) => {
            if (params.row.expenditureType == "3") {
              return h("div", "充值会员");
            }
            if (params.row.expenditureType == "OFFLINE") {
              return h("div", "线下订单");
            }
            if (params.row.expenditureType == "NORMAL") {
              return h("div", "线上订单");
            }
            if (params.row.expenditureType == "VIRTUAL") {
              return h("div", "虚拟订单");
            }
          },
        },
        {
          title: "焕贝额",
          key: "yiBei",
          render: (h, params) => {
            return h(
              "div",
              this.$options.filters.unitPrice(params.row.yiBei, "焕贝")
            );
          },
        },
      ],
      receiptRecordData: [], //发票记录数据
      receiptRecordTotal: 0, //发票记录总条数
      IncomeByPageCount: {}, //收入焕贝额总额，现金额总额
      expenditureCount: {}, //支出
    };
  },
  methods: {
    init() {
      //查询会员信息
      this.getMemberInfo();
      //收入
      this.getOrderData();
    },
    //会员信息tab改变事件
    memberInfoChange(v) {
      if (v == "order") {
        this.getOrderData();
      }
      if (v == "receipt") {
        this.getReceiptRecordData();
      }
    },
    //查询会员信息
    getMemberInfo() {
      let params={
        id:this.id
      }
      API_Member.getMemberInfoData(params).then((res) => {
        this.$set(this, "memberInfo", res.result);
      });
    },
    //会员状态改变事件
    memberStatusChange(v) {
      let params = {
        memberIds: [this.id],
        disabled: v,
      };
      API_Member.updateMemberStatus(params).then((res) => {});
    },
    //查询TA的余额消费记录
    getDepositLogData() {
      this.loading = true;
      this.walletSearchForm.memberId = this.id;
      API_Member.getUserWallet(this.walletSearchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.walletData = res.result.records;
          this.walletTotal = res.result.total;
        }
      });
      this.loading = false;
    },

    //查询支出
    getReceiptRecordData() {
      this.loading = true;
      this.receiptRecordSearchForm.memberId = this.id;
      API_Order.getBranch(this.receiptRecordSearchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.receiptRecordData = res.result.records;
          this.receiptRecordTotal = res.result.total;
          this.getBranchByPageCount(this.receiptRecordSearchForm);
        }
      });
      this.loading = false;
    },
    // 支出焕贝额总额，现金额总额
    getBranchByPageCount(params) {
      API_Order.getBranchByPageCount(params).then((res) => {
        this.expenditureCount = res.result;
      });
    },
    //收入
    getOrderData() {
      this.loading = true;
      this.orderSearchForm.memberId = this.id;
      API_Order.getIncome(this.orderSearchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.orderData = res.result.records;
          this.orderTotal = res.result.total;
          this.getIncomeByPageCountData(this.orderSearchForm);
        }
      });
      this.loading = false;
    },
    // 收入焕贝额总额，现金额总额
    getIncomeByPageCountData(params) {
      API_Order.getIncomeByPageCount(this.orderSearchForm).then((res) => {
        
        this.IncomeByPageCount = res.result;
      });
    },
    //跳转到订单详情页面
    orderDetail(v) {
      this.$router.push({
        name: "order-detail",
        query: {
          sn: v,
        },
      });
    },
    //支出
    walletChangePage(v) {
      this.receiptRecordSearchForm.pageNumber = v;
      this.getReceiptRecordData();
    },
    //支出
    walletChangePageSize(v) {
      this.receiptRecordSearchForm.pageNumber = 1;
      this.receiptRecordSearchForm.pageSize = v;
      this.getReceiptRecordData();
    },

    //收入
    orderChangePage(v) {
      this.orderSearchForm.pageNumber = v;
      this.getOrderData();
    },
    //收入
    orderChangePageSize(v) {
      this.orderSearchForm.pageNumber = 1;
      this.orderSearchForm.pageSize = v;
      this.getOrderData();
    },
    // 收入起止时间从新赋值
    selectDateRange(v) {
      if (v) {
        this.orderSearchForm.startDate = v[0];
        this.orderSearchForm.endDate = v[1];
      }
    },
    //支出时间内
    selectDateRangeZC(v) {
      if (v) {
        this.receiptRecordSearchForm.startDate = v[0];
        this.receiptRecordSearchForm.endDate = v[1];
      }
    },
  },

  mounted() {
    this.id = this.$route.query.id;
    this.init();
  },
};
</script>
<style lang="scss" scoped>
@import "memberDetail.scss";
.totleQuota {
  margin-left: auto;
  display: flex;
  align-items: center;
  p {
    padding: 0 15px;
    box-sizing: border-box;

    span {
      color: #ff5c58;
      padding-left: 10px;
      font-size: 20px;
      font-weight: bold;
    }
  }
}
</style>
